---
title: 'Husky, Commitlint, and Prettier Configuration'
tags: 'git,prettier'
description: 'Configuration to check commit message, and run prettier pre-commit'
---

In this configuration there are 2 things that will be checked

1. Checking the commit message following the [conventional commits](https://theodorusclarence.com/library/conventional-commit-readme), it will fail to commit if the commit message is not following the rule.
2. Writing prettier changes before each commit. This is done to prevent developers that did not have prettier installed in their machine.

## 1. Initialize Husky

```bash
yarn add --dev husky

npx husky init
```

It will initialize all of the needed files including a sample pre-commit hook.

## 2. Add Commitlint

First, install the dev dependencies

```bash
yarn add -D @commitlint/config-conventional @commitlint/cli
```

Then, create a new file in the husky folder

```bash title=".husky/commit-msg"
npx --no-install commitlint --edit "$1"
```

Create commitlint.config.js, you don't need to override the rules if you don't want to

```js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    //   TODO Add Scope Enum Here
    // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'chore',
        'style',
        'refactor',
        'ci',
        'test',
        'revert',
        'perf',
        'vercel',
      ],
    ],
  },
};
```

Commit message will be checked before commit now. 🚀

## 3. Add Lint Staged & Prettier

Install dependencies

```bash
yarn add -D lint-staged prettier
```

We're using lint-staged so prettier doesn't have to run on all files, but only the staged files.

Add this to package.json, or save it as a `.lintstagedrc` file

```json
{
  // ...existing code, you can split the html,css,json if you add eslint to configuration
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      // If you have eslint configured, this is a great place to include it
      "eslint --max-warnings=0",
      "prettier --write"
    ],
    "**/*.{html,json,css,scss,md,mdx}": ["prettier -w"]
  }
}
```

Then add this to .husky/pre-commit

```bash title=".husky/pre-commit"
npx lint-staged
```

You can also add test command or eslint check here if you want to do test before each commit

## 4. Add postmerge hook

Use this to add hook, so husky will run `yarn` everytime we pull changes.

```bash title=".husky/post-merge"
yarn
```

You can also replace `yarn` with `pnpm install` `npm install` or whatever you're using
